<!--
 API Documentation HTML Template  - 1.0.1
 Copyright © 2016 Florian Nicolas
 Licensed under the MIT license.
 https://github.com/ticlekiwi/API-Documentation-HTML-Template
 !-->
<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title>MixIO入门指南</title>
    <link rel="shortcut icon" href="../img/shortcut.png"/>
    <meta name="description" content="">
    <meta name="author" content="ticlekiwi">

    <meta http-equiv="cleartype" content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/hightlightjs-dark.css">
    <link rel="stylesheet" href="../css/nunito.css">
    <link rel="stylesheet" href="../css/muuri.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/highlight.min.js"></script>
    <link rel="stylesheet" href="css/style.css" media="all">
    <link rel="stylesheet" href="../css/farbtastic.css">
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/nunito.css" rel="stylesheet">
    <link href="../css/sb-admin-2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/muuri.css">
    <link rel="stylesheet" href="../css/widgets.css">
    <script>
        hljs.initHighlightingOnLoad();
    </script>
</head>

<body class="one-content-column-version">
<div class="left-menu">
    <div class="content-logo" style="display: flex;flex-direction: row;align-items: center;">
        <img src="../img/logo.png" style="height:40px;width:38px" />
        <span style="font-weight:bold;color:white;margin-left:15px;font-size: 25px;">MixIO</span>
    </div>
    <div class="content-menu">
        <ul>
            <li class="scroll-to-link active" data-target="get-started">
                <a>快速上手指南</a>
            </li>
            <li class="scroll-to-link" data-target="widgets">
                <a>组件说明</a>
            </li>
            <li class="scroll-to-link" data-target="share">
                <a>项目共享</a>
            </li>
        </ul>
    </div>
</div>


<div class="content-page">
    <div class="content">
        
        <div class="overflow-hidden content-section" id="content-get-started">
            
            <h1 id="get-started">快速上手指南</h1>
            <p>注意：如要访问MixIO开发者文档，请移步 <a href="../devAPI">dev-api</a></p>
            <p>
                MixIO是一个组件化的物联网应用构建平台。在MixIO平台中，你可以便捷地连接、控制、监控各类可编程设备，快速打造易用的物联网应用，并将创意共享给他人。
            </p>
            <p>
                MixIO平台的全部通信均基于开源的MQTT协议。这意味着，凡是支持MQTT协议的硬件设备都能够使用MixIO的开放能力。在本指南描述的应用场景中，MixIO平台是与Mixly图形化编程软件结合使用的。
            </p>
            <h3>创建 / 导入项目</h3>
            <p>
                假定您已经完成了账号注册并成功登录到了MixIO平台。在打开的“项目管理”页面中，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-plus"></i></a>按钮，即可开始创建一个MixIO项目。<br>
                在弹出的对话框中，您需要为项目指定一个名称。点击<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-check"></i></a>按钮，即可完成项目创建。<br>
                如果您想基于其他用户的现有项目创建项目，您也可以通过点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-cloud-download"></i></a>按钮以导入项目（需要该用户为您提供一个授权码）。
            </p>
            <h3>连接设备</h3>
            <p>
                成功创建或导入项目后，“项目管理”页面中将出现对应的项目。点击项目缩略图下方的<a class="btn btn-success btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-arrow-right"></i></a>按钮，即可进入该项目。<br>
                进入项目页面后，您可以首先点击右上角的<a class="btn btn-success btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-play"></i></a>按钮以运行项目。<br>
                在项目运行状态下，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6);position:relative;"><i class="fa fa-link"></i></a>按钮，可以查看硬件连接所需的用户名/密码。<b>注意：此密码与您MixIO账号的登录密码不同。</b><br>
                在Mixly图形化编程软件中，选择物联网→MixIO分区，使用“创建MQTT客户端并连接”程序块，依次键入用户名、硬件连接密码、项目名称，即可完成设备的连接。设备的连接信息将被实时显示在<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6);position:relative;"><i class="fa fa-link"></i></a>按钮呼起的对话框中，设备名称为硬件的MAC地址。
            </p>
            <h3>添加组件</h3>
            <p>
                一个空的MixIO项目仅起到了汇聚设备、共享MQTT连接的作用；要实现控制、监控等特定功能，需要您为项目添加恰当的组件。在运行模式下，项目是不可编辑的；您需要点击右上角的<a class="btn btn-danger btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-stop"></i></a>按钮停止项目，以重新进入编辑模式。<br>
                在编辑模式下，点击右上角的<a class="btn btn-primary btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-plus"></i></a>按钮，可以呼起“添加组件”对话框。MixIO平台提供了15种不同的组件，组件的具体功能与见下一章节“组件说明”。<br>
                添加组件时，您需要为组件指定一个“组件名称”（用以在项目中特异标记该组件），并设定“消息主题”（用以与该组件进行输入/输出交互）。在Mixly图形化编程软件中，使用“发布”与“订阅”程序块，并遵循下一章节“组件说明”中的输入/输出规范，即可充分调用组件功能。<br>
                在编辑模式下，项目组件的位置是可以自由移动的，组件的各项属性是可以自由更改的。在完成更改后，请您点击右上角的<a class="btn btn-info btn-circle" style="color:white;transform:scale(0.6)"><i class="fa fa-save"></i></a>按钮以保存项目布局。
                
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-widgets">
            <h1 id="widgets">组件说明</h1>
            <p>
                MixIO平台提供了13种预设组件，以下为每种组件的功能与输入/输出规范进行详细介绍。
            </p>
            <h3>组件总览</h3>
            <table>
                <thead>
                <tr>
                    <th>组件名称</th>
                    <th>功能简介</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>按键 / 开关</td>
                    <td>以按键和开关两种模式响应用户输入，向设定主题发送0/1信号。</td>
                </tr>
                <tr>
                    <td>滑杆</td>
                    <td>以滑动形式响应用户输入，向设定主题发送数值信息；监听设定主题的数值信息，并进行实时呈现。</td>
                </tr>
                <tr>
                    <td>文本输入</td>
                    <td>将用户输入的文本信息发送到设定主题。</td>
                </tr>
                <tr>
                    <td>摇杆手柄</td>
                    <td>以摇杆形式响应用户输入，向设定主题发送输入位置坐标字符串。</td>
                </tr>
                <tr>
                    <td>RGB色盘</td>
                    <td>支持用户自由选色，将色彩对应的R/G/B通道数值发送到设定主题；监听设定主题的数值信息，并将其实时合成为对应的颜色。</td>
                </tr>
                <tr>
                    <td>指示灯</td>
                    <td>监听设定主题的数值信号，呈现对应的熄灭/点亮色彩。</td>
                </tr>
                <tr>
                    <td>文本显示屏</td>
                    <td>监听设定主题的文本信息，将信息进行原样呈现。</td>
                </tr>
                <tr>
                    <td>折线图表</td>
                    <td>监听设定主题的数值信息，以折线图形式进行呈现，支持多数据源与图表转换。</td>
                </tr>
                <tr>
                    <td>直方图表</td>
                    <td>监听设定主题的文本信息，以直方图形式进行筛选呈现，支持图表转换。</td>
                </tr>
                <tr>
                    <td>数据表格</td>
                    <td>监听设定主题的文本信息，以表格形式进行筛选呈现。</td>
                </tr>
                <tr>
                    <td>仪表盘</td>
                    <td>监听设定主题的数值信息，进行动态呈现。</td>
                </tr>
                <tr>
                    <td>数据地图</td>
                    <td>监听设定主题下特定格式的消息，在地图上进行包含时空两维信息的可视化呈现。</td>
                </tr>
                <tr>
                    <td>实时气象仪</td>
                    <td>获取设定地区的实时天气，并向设定主题发送。</td>
                </tr>
                </tbody>
            </table>
        </div>
        
    </div>
</div>

<script src="js/script.js"></script>
</body>

</html>